import React from 'react';
import MainUI from '../../components/layout/MainUI';
import {connect} from 'dva';
import  moment from 'moment';
import styles2 from './css/dashboard.less';
import {
  Breadcrumb,
  Button,
  Col,
  Form,
  Input,
  Pagination,
  Row,
  Table,
  Icon,
} from 'antd';

const FormItem = Form.Item;
const params = {
  pageSize: 10,
  pageNumber: 1
};
const formItemLayout = {
  labelCol: {span: 8},
  wrapperCol: {span: 16},
};

class CustomerPayRecord extends React.Component {

  state = {
    columns: [
      {title: '顾客', dataIndex: 'customerName',},
      {title: '手机', dataIndex: 'customerCellphone',},
      {
        title: '类型', dataIndex: 'type', render: (value) => {
          let text='未知';
          switch (value){
            case 1:text='顾客充值'; break;
            case 2:text='现金付款'; break;
            case 3:text='余额付款'; break;
          }
        if(value==3){
          return <font color='red' size={2}>{
            text
          }</font>;
        }else{
          return <font color='green' size={2}>{
            text
          }</font>;
        }
      }
      },
      {
        title: '实际金额(元)', dataIndex: 'actualMoney', render: (value) => {
        return <font size={2}>￥ {value}</font>;
      }
      },
      {title: '折扣(实际价格=原价x折扣)', dataIndex: 'discount',},
      {title: '服务员工', dataIndex: 'serviceName',},
      {title: '操作时间', dataIndex: 'createDate',render: (value) => {return moment(value).format("YYYY-MM-DD HH:mm:ss") }},

    ],
  };
  search = (page, pageSize) => {
    if (page != null || page != undefined) {
      params.pageNumber = page;
    }

    this.props.form.validateFieldsAndScroll((errors, values) => {
      if (errors) {

      } else {
        this.props.dispatch({
          type: 'finance/e_getCustomerPayRecordsPage',
          payload: {...params, ...values}
        });
      }
    });
  };


  render() {
    let koufei=0;
    let xianjin=0;
    let chongzhi=0;

    if(this.props.customerPayRecordsPage.data!=null){
      this.props.customerPayRecordsPage.data.map((o)=>{
        if(o.type===1){
          chongzhi+=o.actualMoney;
        }else if(o.type===2){
          xianjin+=o.actualMoney;
        }else if(o.type===3){
          koufei+=o.actualMoney;
        }


      });
    }
    return (
      <MainUI>
        <Breadcrumb style={{margin: '12px 0'}}>
          <Breadcrumb.Item>功能管理</Breadcrumb.Item>
          <Breadcrumb.Item> 财务管理</Breadcrumb.Item>
          <Breadcrumb.Item> 顾客支付记录</Breadcrumb.Item>
        </Breadcrumb>
        <div style={{padding: 24, background: '#fff', minHeight: 360}}>
          <Form className="ant-advanced-search-form">
            <Row>
              <Col span={5}>
                <FormItem {...formItemLayout} label='顾客姓名'>
                  {this.props.form.getFieldDecorator('customerName')(
                    <Input placeholder="姓名" suffix={<Icon type='user'/>}/>
                  )}
                </FormItem>
              </Col>
              <Col span={5}>
                <FormItem {...formItemLayout} label='顾客电话'>
                  {this.props.form.getFieldDecorator('customerCellphone', {
                    rules: [
                      {
                        message: "请输入手机号",
                        type: "string",
                        pattern: "^((13[0-9])|(14[5|7])|(15([0-3]|[5-9]))|(18[0,5-9]))\\d{8}$"
                      },
                    ],
                  })(
                    <Input placeholder="手机号" suffix={<Icon type='phone'/>}/>
                  )}
                </FormItem>
              </Col>
              <Col span={5}>
                <FormItem {...formItemLayout} label='会员卡号'>
                  {this.props.form.getFieldDecorator('customerNo')(
                    <Input placeholder="会员卡号" suffix={<Icon type='card'/>}/>
                  )}
                </FormItem>
              </Col>
              <Col span={5}>
                <FormItem {...formItemLayout} label='服务员工电话'>
                  {this.props.form.getFieldDecorator('serverCellphone', {
                    rules: [
                      {
                        message: "请输入手机号",
                        type: "string",
                        pattern: "^((13[0-9])|(14[5|7])|(15([0-3]|[5-9]))|(18[0,5-9]))\\d{8}$"
                      },
                    ],
                  })(
                    <Input placeholder="手机号" suffix={<Icon type='phone'/>}/>
                  )}
                </FormItem>
              </Col>
              <Col span={2}>
                <Button style={{marginLeft: 8, marginTop: '3px'}} onClick={()=>{ this.props.form.resetFields()}}>
                  清空
                </Button>
              </Col>
              <Col span={2} style={{textAlign: 'right',}}>
                <Button type="primary" icon="retweet" onClick={() => {
                  this.search();
                }}>刷新</Button>
              </Col>
            </Row>
          </Form>
          <Row style={{marginTop:30,
            backgroundColor: '#e6f7ff',}}>
            <Col sm={5}  xs={24}>
              <div style={{
                paddingTop:15,
                paddingBottom:25,
                border: '1px solid #e9e9e9',
                textAlign:'center',
              }}>
                <span style={{fontSize: 16}}>会员扣费收入{<font color='red'>(此页)</font>}</span>
                <p style={{fontSize: 24, color: "green",fontWeight:'bold ',marginTop:15}}>￥ {koufei.toFixed(2)}</p>
                <em />
              </div>
            </Col>
            <Col sm={5} xs={24}>
              <div style={{
                paddingTop:15,
                paddingBottom:25,
                border: '1px solid #e9e9e9',
                borderLeft:'0px',
                textAlign:'center',
              }}>
                <span style={{fontSize: 16}}>现金付款收入{<font color='red'>(此页)</font>}</span>
                <p style={{fontSize: 24, color: "green",fontWeight:'bold ',marginTop:15}}>￥ {xianjin.toFixed(2)}</p>
                <em />
              </div>
            </Col>
            <Col sm={5} xs={24}>
              <div style={{
                paddingTop:15,
                paddingBottom:25,
                border: '1px solid #e9e9e9',
                borderLeft:'0px',
                textAlign:'center',
              }}>
                <span style={{fontSize: 16}}>会员充值收入{<font color='red'>(此页)</font>}</span>
                <p style={{fontSize: 24, color: "green",fontWeight:'bold ',marginTop:15}}>￥ {chongzhi.toFixed(2)}</p>
                <em />
              </div>
            </Col>
            <Col sm={5} xs={24}>
              <div style={{
                paddingTop:15,
                paddingBottom:25,
                border: '1px solid #e9e9e9',
                borderLeft:'0px',
                textAlign:'center',
              }}>
                <span style={{fontSize: 16}}>实际现金收入{<font color='red'>(此页)</font>}</span>
                <p style={{fontSize: 24, color: "red",fontWeight:'bold ',marginTop:15}}>￥ {(chongzhi+xianjin).toFixed(2)}</p>
                <em />
              </div>
            </Col>
            <Col sm={4} xs={24}>
              <div style={{
                paddingTop:15,
                paddingBottom:25,
                border: '1px solid #e9e9e9',
                borderLeft:'0px',
                textAlign:'center',
              }}>
                <span style={{fontSize: 16}}>实际交易收入{<font color='red'>(此页)</font>}</span>
                <p style={{fontSize: 24, color: "red",fontWeight:'bold ',marginTop:15}}>￥ {(koufei+xianjin).toFixed(2)}</p>
                <em />
              </div>
            </Col>
          </Row>
          <Row>
            {<Table bordered={true} rowKey='id' style={{marginTop: '10px'}}
                    columns={this.state.columns}
                    dataSource={this.props.customerPayRecordsPage.data} pagination={false}/>}
            {
              this.props.customerPayRecordsPage.pageNumber!= undefined ?
                <Pagination style={{float: 'right', marginTop: '5px'}} onChange={this.search}
                            total={this.props.customerPayRecordsPage.totalRows} current={this.props.customerPayRecordsPage.pageNumber}
                            pageSize={this.props.customerPayRecordsPage.pageSize}/> : ''
            }

          </Row>
        </div>
      </MainUI>
    )
  };
}

function mapStateToProps(state) {
  return {
    customerPayRecordsPage: state.finance.customerPayRecordsPage,
  }
}

export default connect(mapStateToProps)(Form.create()(CustomerPayRecord));
